<template>
  <div>
    <a-drawer
      :title="title"
      :width="width"
      placement="right"
      :closable="false"
      :visible="visible"
      @close="handleClose"
    >
      <div class="pos-rlt">
        <div class="pos-abs r0" style="top:-70px;">
          <slot name="extra"></slot>
        </div>
        <slot></slot>
      </div>
    </a-drawer>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'modelVal',
    event: 'change'
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    modelVal: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '80%'
    },
    flowInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      visible: false
    }
  },
  mounted () {
    this.visible = this.modelVal
  },
  watch: {
    modelVal (v) {
      this.visible = v
      console.log(this.flowInfo, 'flowInfo')
    },
    visible (v) {
      this.$emit('change', v)
    }
  },
  methods: {
    open () {
      this.visible = true
      console.log(this.flowInfo, 'flowInfo')
    },
    close () {
      this.visible = false
    },
    handleClose () {
      this.$emit('close')
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
